<!-- 统计卡片 -->
<template>
  <el-row :gutter="16">
    <el-col :md="6" :sm="12" :xs="24">
      <ele-card class="monitor-count">
        <el-tag size="large" :disable-transitions="true">
          <el-icon>
            <UserFilled />
          </el-icon>
        </el-tag>
        <ele-text size="xxl" class="monitor-count-value">21.2 k</ele-text>
        <ele-text type="placeholder" class="monitor-count-text">
          总访问人数
        </ele-text>
        <ele-avatar-group :data="visitUsers" size="small" :max-count="4" />
      </ele-card>
    </el-col>
    <el-col :md="6" :sm="12" :xs="24">
      <ele-card class="monitor-count">
        <el-tag type="warning" size="large" :disable-transitions="true">
          <el-icon>
            <Opportunity />
          </el-icon>
        </el-tag>
        <ele-text size="xxl" class="monitor-count-value">1.6 k</ele-text>
        <ele-text type="placeholder" class="monitor-count-text">
          点击量(近30天)
        </ele-text>
        <ele-text
          strong
          type="success"
          :icon="ArrowUpBold"
          class="monitor-count-trend"
        >
          &nbsp;110.5%
        </ele-text>
        <ele-tooltip content="指标说明" placement="top" :offset="3">
          <ele-text
            :icon="QuestionCircleOutlined"
            type="placeholder"
            class="monitor-count-tip"
          />
        </ele-tooltip>
      </ele-card>
    </el-col>
    <el-col :md="6" :sm="12" :xs="24">
      <ele-card class="monitor-count">
        <el-tag type="danger" size="large" :disable-transitions="true">
          <el-icon>
            <Flag />
          </el-icon>
        </el-tag>
        <ele-text size="xxl" class="monitor-count-value">826.0</ele-text>
        <ele-text type="placeholder" class="monitor-count-text">
          到达量(近30天)
        </ele-text>
        <ele-text
          strong
          type="danger"
          :icon="ArrowDownBold"
          class="monitor-count-trend"
        >
          &nbsp;15.5%
        </ele-text>
      </ele-card>
    </el-col>
    <el-col :md="6" :sm="12" :xs="24">
      <ele-card class="monitor-count">
        <el-tag type="success" size="large" :disable-transitions="true">
          <el-icon>
            <Share />
          </el-icon>
        </el-tag>
        <ele-text size="xxl" class="monitor-count-value">28.8 %</ele-text>
        <ele-text type="placeholder" class="monitor-count-text">
          转化率(近30天)
        </ele-text>
        <ele-text
          strong
          type="success"
          :icon="ArrowUpBold"
          class="monitor-count-trend"
        >
          &nbsp;65.8%
        </ele-text>
        <ele-tooltip content="指标说明" placement="top" :offset="3">
          <ele-text
            :icon="QuestionCircleOutlined"
            type="placeholder"
            class="monitor-count-tip"
          />
        </ele-tooltip>
      </ele-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from "vue";
import {
  UserFilled,
  Opportunity,
  Flag,
  Share,
  ArrowUpBold,
  ArrowDownBold,
} from "@element-plus/icons-vue";
import { QuestionCircleOutlined } from "@/components/icons";

/** 访问人数 */
const visitUsers = ref([
  {
    key: 1,
    label: "SunSmile",
    value:
      "https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg",
  },
  {
    key: 2,
    label: "你的名字很好听",
    value:
      "https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg",
  },
  {
    key: 3,
    label: "全村人的希望",
    value:
      "https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg",
  },
  {
    key: 4,
    label: "Jasmine",
    value:
      "https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg",
  },
  {
    key: 5,
    label: "酷酷的大叔",
    value:
      "https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg",
  },
  {
    key: 6,
    label: "管理员",
    value: "https://cdn.eleadmin.com/20200610/avatar.jpg",
  },
]);
</script>

<style lang="scss" scoped>
.monitor-count {
  position: relative;
  text-align: center;

  .el-tag {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 0;
    padding: 0;
  }

  .monitor-count-value {
    margin-top: 8px;
  }

  .monitor-count-text {
    margin: 4px 0 8px 0;
  }

  .monitor-count-trend {
    line-height: 26px;
  }

  .monitor-count-tip {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 15px;
    cursor: help;
  }
}
</style>
